<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
        width: 400px;
        min-height: 300px;
        background-color: lightgreen;
        margin: auto;
        text-align: center;
        padding: 10px;
    }
    #container ul{
        margin: 0;
    }
    #container li{
        list-style: none;
        background-color: lightGray;
        text-align: left;
        padding-left: 45px;
        height: 25px;
        line-height: 25px;
        cursor: pointer;

    }
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
    <script src= 'template.js'></script>
    <script id='search' type='text/html'>
        <ul>
            {{each s as value}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>
    <script type="text/javascript">
        $(function(){
            $("#keyword").keyup(function(){
                // console.lo($(this).val());
                var res = $(this).val();
                $.ajax({
                    type:'get',
                    data:{wd:res},
                    dataType:'jsonp',
                    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                    jsonp:'cb',
                    success:function(data){
                        console.log(data);
                        var tag = template('search',data);
                        $("#info").html(tag);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <input type="text" name="keyword" id="keyword">
        <input type="button" value="搜索" id="query">
        <div id="info"></div>
    </div>
</body>
</html>
<!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=l&json=1&p=3&sid=1427_13551_21117_18560_24658_20927&req=2&csor=1&cb=jQuery110208851708231703319_1509239316018&_=1509239316021 -->